<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>生产过程信息系统-主页</title>
    <link rel="stylesheet" href="../static/mint-ui/style.min.css">

    <style type="text/css">

        html {
            font-size: 100px;
            height: 100%;
        }

        body {
            height: 100%;
            padidng: 0;
            margin: 0;
            background-color: #F5F5F5;
            font-size: 0.16rem;
        }

        .my-card {
            font-size: 0.14rem;
            margin: 0.1rem;
            padding: 0 0.1rem 0 0.1rem;
            border-radius: 0.08rem;
            border: 0.01rem solid #DDDDDD;
            box-shadow: 0.00rem 0.00rem 0.1rem 0.00rem #DDDDDD;
            /*
             */
            /* color:#70706F; */
            background-color: #FFFFFF;
        }

        .my-card-title {

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            padding: 0.09rem 0 0.07rem 0;
            border-bottom: 0.01rem solid #EEEEEE;
            margin-bottom: 0.04rem;

            color: #OOOOOO;

        }

        .my-card-opr {

            border-top: 0.01rem solid #EEEEEE;
            margin-top: 0.04rem;

            text-align: right;
            padding: 0.06rem 0 0.06rem 0;
        }

        .my-card-content {

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            color: #70706F;

        }

        .my-card-content > div {
            display: flex;
            flex-direction: row;
            width: 46%;
            padding: 0.04rem 0 0.04rem 0;

        }

        .my-card-content-label {
            width: 0.5rem;
        }

        .my-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0.4rem;
        }

        .my-navbar {
            position: fixed;
            top: 0.4rem;
            left: 0;
            width: 100%;
            height: 0.46rem;
        }
    </style>

</head>
<body>
<div id="app" class="my-container">
    <mt-header fixed title="生产过程信息系统" :style="{height:'0.4rem'}"></mt-header>
    <div class="my-navbar">

        <mt-navbar v-model="selected" :style="{height:'0.46rem'}">
            <mt-tab-item id="print-unprinted">待印花</mt-tab-item>
            <mt-tab-item id="print-printed">已印花</mt-tab-item>
            <mt-tab-item id="print-afterPrinted">后工序</mt-tab-item>
        </mt-navbar>
    </div>
    

    <!-- tab-container -->
    <mt-tab-container v-model="selected" ref="printTabContainer"
                      :style="{position:'fixed',top:'0.88rem',bottom:'0.02rem',width:'100%',overflow:'scroll'}">
        <mt-tab-container-item id="print-unprinted">

            <mt-loadmore @bottom-status-change="unprintedBottomStatusChange" :auto-fill="unprintedAutoFill" :top-method="unprintedLoadTop" :bottom-method="unprintedLoadBottom"
                         :bottom-all-loaded="unprintedAllLoaded" ref="unprintLoadmore">

                <div class="my-card" v-for=" pro in unprintPage.list ">

                    <div class="my-card-title">
                        <div>组号 {{ pro.process_id }}</div>
                        <div>待印花</div>
                    </div>

                    <div class="my-card-content">
                        <div>
                            <div class="my-card-content-label">客户</div>
                            <div>{{ pro.process_cus }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">规格</div>
                            <div>{{ pro.process_std }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">花色号</div>
                            <div>{{ pro.process_color }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">投坯</div>
                            <div>{{ pro.group_num }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">前处理</div>
                            <div>{{ pro.pretreat_num }}</div>
	                    </div>
	                    <div  v-if="pro.plan_type==4">
	                        <div class="my-card-content-label">待印花</div>
                            <div>{{ pro.dye_num }}</div>
	                    </div>
	                      
	                      
	                        
	                            
                    </div>
                    <div class="my-card-opr">
                        <mt-button type="danger" size="small" @click.prevent="finish(pro.process_id)">完成印花</mt-button>
                    </div>

                </div>

                </mt-loadmore>

        </mt-tab-container-item>





        <mt-tab-container-item id="print-printed">
       		
       		  <mt-loadmore @bottom-status-change="unprintedBottomStatusChange" :auto-fill="unprintedAutoFill" :top-method="unprintedLoadTop" :bottom-method="unprintedLoadBottom"
                         :bottom-all-loaded="unprintedAllLoaded" ref="unprintLoadmore1">

                <div class="my-card" v-for=" pro in unprintPage.list ">

                    <div class="my-card-title">
                        <div>组号 {{ pro.process_id }}</div>
                        <div>印花完成</div>
                    </div>

                    <div class="my-card-content">
                        <div>
                            <div class="my-card-content-label">客户</div>
                            <div>{{ pro.process_cus }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">规格</div>
                            <div>{{ pro.process_std }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">花色号</div>
                            <div>{{ pro.process_color }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">投坯</div>
                            <div>{{ pro.group_num }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">前处理</div>
                            <div>{{ pro.pretreat_num }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">印花数量</div>
                            <div>{{ pro.plan_num }}</div>
                        </div>
                    </div>
                    

                </div>

                </mt-loadmore>
       		
       		
       		
        </mt-tab-container-item>
        

        <mt-tab-container-item id="print-afterPrinted">
        
        
        
        
       		  <mt-loadmore @bottom-status-change="unprintedBottomStatusChange" :auto-fill="unprintedAutoFill" :top-method="unprintedLoadTop" :bottom-method="unprintedLoadBottom"
                         :bottom-all-loaded="unprintedAllLoaded" ref="unprintLoadmore2">

                <div class="my-card" v-for=" pro in unprintPage.list ">

                    <div class="my-card-title">
                        <div>组号 {{ pro.process_id }}</div>
                        <div>后工序</div>
                    </div>

                    <div class="my-card-content">
                    
                        <div>
                            <div class="my-card-content-label">客户</div>
                            <div>{{ pro.process_cus }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">规格</div>
                            <div>{{ pro.process_std }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">花色号</div>
                            <div>{{ pro.process_color }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">投坯</div>
                            <div>{{ pro.group_num }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">前处理</div>
                            <div>{{ pro.pretreat_num }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">印花数量</div>
                            <div>{{ pro.plan_num }}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">布类型</div>
                            <div>{{ pro.plan_type==1?"白布产品":pro.plan_type==2?"染色产品":pro.plan_type==3?"无底色印花产品":"有底色印花产品"}}</div>
                        </div>
                        
                        <div>
                            <div class="my-card-content-label">后工序</div>
                            <div>去整理</div>
                        </div>
                        
                        <div v-if="pro.plan_type==3">
                            <div class="my-card-content-label">染色数量</div>
                            <div>{{ pro.dye_num }}</div>
                        </div>
                        
                    </div>
                    

                </div>

                </mt-loadmore>
        
        
        
        
            
        </mt-tab-container-item>
        
        
    </mt-tab-container>

</div>


<script type="text/javascript" src="../static/js/vue-2.5.16.min.js"></script>
<script type="text/javascript" src="../static/js/axios.min.js"></script>
<script type="text/javascript" src="../static/mint-ui/index.js"></script>


<script type="text/javascript">

    new Vue({
        el: '#app',//容器
        data: {//数据绑定
            selected: 'print-unprinted',
            unprintPage: {},
            unprintedAllLoaded: false,
            unprintedAutoFill:false
            

        },
          watch: {
    // 如果 question 发生改变，这个函数就会运行
		     selected(selected) {
			      if(selected=="print-unprinted"){
			      this.loadUnprintedData('m_print', 1, 5, '');//待印花
			      
			      }
			      if(selected=="print-printed"){
			      this.loadUnprintedData('m_print', 1, 5, '20');//已印花
			      
			      }
			      if(selected=="print-afterPrinted"){
			      this.loadUnprintedData('m_print', 1, 5, '20');//后工序
			      }
		   }
	},
				  
				  
				  
        methods: {//方法


            unprintedBottomStatusChange(status){
                console.log(status);
                if(status=='pull'){
                    console.log(this.$refs.printTabContainer);
                    
                }
                //
            },


            //url,page,limit,status [地址，页码，每页大小，状态]
            loadUnprintedData(url, page, limit, status) {//加载指定页码数据

                let _this = this;

                this.unprintedAllLoaded = true;//执行加载数据前一定要设为TRUE，阻止其自动不停加载
                axios.get(url, {
                    params: {
                        process_status: status,
                        page: page,
                        limit: limit

                    }
                })
                    .then(function (response) {
                        console.log(response);
                        _this.unprintPage = response.data;

                        if(_this.unprintPage.hasNextPage){
                            //当前页若不是最后一页，设置该属性为false
                            _this.unprintedAllLoaded = false;
                        }


                    })


                    .catch(function (error) {
                        console.log(error);
                    });


            },

      
            unprintedLoadTop() {//下拉加载上一页数据

                if(this.selected=="print-unprinted"){
                   this.loadUnprintedData('m_print', this.unprintPage.prePage, 5, '');
                // 加载更多数据
               
                }
                 if(this.selected=="print-printed"){
                    this.loadUnprintedData('m_print', this.unprintPage.prePage, 5, '20');
                // 加载更多数据
               
                }if(this.selected=="print-afterPrinted"){
                    this.loadUnprintedData('m_print', this.unprintPage.prePage, 5, '20');
                // 加载更多数据
                }
               
                    this.$refs.unprintLoadmore.onTopLoaded();   
                    this.$refs.unprintLoadmore1.onTopLoaded();  
                    this.$refs.unprintLoadmore2.onTopLoaded();         

            },
            
            
            
            
            unprintedLoadBottom() {//上滑加载下一页数据
	               if(this.selected=="print-unprinted"){
	                  this.loadUnprintedData('m_print', this.unprintPage.nextPage, 5, '');
	                // 加载更多数据
	               
	                }
	                 if(this.selected=="print-printed"){
	                    this.loadUnprintedData('m_print', this.unprintPage.nextPage, 5, '20');
	                // 加载更多数据
	               
	                }if(this.selected=="print-afterPrinted"){
	                    this.loadUnprintedData('m_print', this.unprintPage.nextPage, 5, '20');
	                // 加载更多数据
	                }
            // //     this.allLoaded = true;// 若数据已全部获取完毕
		                this.$refs.unprintLoadmore.onBottomLoaded();
		                this.$refs.unprintLoadmore1.onBottomLoaded();
		                this.$refs.unprintLoadmore2.onBottomLoaded();
            },             


            finish(process_id){
                let _this= this;
                _this.$messagebox.prompt('请输入印花数').then(({ value, action }) => {
                    axios.put('m_print/'+process_id, {
                        print_num: value
                    })
                        .then(function (response) {
                            let  data =response.data;
                            if(data.success){
                                let instance= _this.$toast({
                                    message: data.message,
                                    iconClass: 'mint-toast-icon mintui mintui-success'
                                });
                                //1000毫秒后关闭，并进入home页
                                setTimeout(() => {
                                    instance.close();
                                    _this.loadUnprintedData('m_print', _this.unprintPage.pageNum, 5, '');
                                }, 500);


                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                });
            }



        },


        //回调函数（Vue对象挂在界面完成时）
        mounted() {
            this.loadUnprintedData('m_print', 1, 5, '');
            
        },

        //回复滚动条置顶
        updated(){
            this.$refs.printTabContainer.$el.scrollTop=0;
        }





    });

</script>
</body>
</html>
